import React, { Component } from 'react';
// import pic from '../assecs/1.png'
import '../styles/MyCate.scss'
import { category_list, category_subcate } from "../api/index";

class MyCate extends Component {
  constructor(props) {
    super(props)
    this.state = {
      indexs: 0,
      list: [],
      list2: []
    }
  }
  // 组件挂载完成
  async componentDidMount() {
    var res = await category_list()
    if (res.data.code == 200) {// eslint-disable-next-line
      this.setState({ list: res.data.list })
    }
  }

  // 点击高亮
  async handclick(item, index) {
    this.setState({ indexs: index })
    var res = await category_subcate({ id: item.id })
    if (res.data.code == 200) {// eslint-disable-next-line
      this.setState({ list2: res.data.subcate.subcategory })
      console.log(this.state.list2);
    }
  }
  render() {
    return (
      <div className='cate'>
        <div className="left">
          {
            this.state.list.map((item, index) => {
              return (
                <div className={'name ' + (this.state.indexs === index ? 'active' : '')} key={index} onClick={() => { this.handclick(item, index) }}>{item.name}</div>
              )
            })
          }
        </div>
        <div className="right">
          {
            this.state.list2.map((item, index) => {
              return (
                <div className="name2" key={index}>
                  <div className='title'> {item.name}</div>
                  <div className="list">
                    {/* {
                      item.list2.subNavs.map((item, index) => {
                        return (
                          <div className="item" key={index}>
                            <img src={item.pic} alt="" />
                            <p>{item.name}</p>
                          </div>

                        )
                      })
                    } */}
                  </div>

                </div>
              )
            })
          }
        </div>
      </div>
    );
  }
}

export default MyCate;